<section class="py-6" [ngClass]="['bg' + default, 'text' + contrastInv]">
	<div
		class="container mx-auto flex flex-col justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:space-x-12 lg:justify-between lg:flex-row"
	>
		<div class="flex flex-col space-y-4 text-center lg:text-left">
			<h1 class="text-5xl font-bold leading-none">Stay in the loop</h1>
			<p class="text-lg">
				Doloribus consectetur quasi ipsa quo neque culpa blanditiis ducimus recusandae a
				veritatis optio cumque, in harum ad nam!
			</p>
		</div>
		<div
			class="flex flex-row items-center self-center justify-center flex-shrink-0 shadow-md lg:justify-end"
		>
			<div class="flex flex-row">
				<input
					type="text"
					class="w-3/5 p-3 rounded-l-lg sm:w-2/3"
					placeholder="example@email.com"
				/>
				<button
					class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3"
					type="button"
					[ngClass]="['bg' + primary, 'text' + contrast]"
				>
					Subscribe
				</button>
			</div>
		</div>
	</div>
</section>
